<template>
    <div>
        <el-card shadow="never">
            <template #header>
                <div>
                    增加
                </div>
            </template>
            <div style="height:150px;">
                <vxe-form v-model:collapseStatus="collapseStatus" ref="formRef" :data="formData" :rules="formRules"
                    title-align="right" title-width="100" title-colon custom-layout @reset="resetEvent"
                    @submit="submitEvent">
                    <vxe-form-item title="类型" field="type" :item-render="{}">
                        <template #default="{ data }">
                            <vxe-select v-model="data.type" placeholder="可清除" clearable>
                                <vxe-option value="mj" label="满减"></vxe-option>
                                <vxe-option value="zk" label="折扣"></vxe-option>
                            </vxe-select>
                        </template>
                    </vxe-form-item>
                    <vxe-form-item title="满" field="full" :item-render="{}" v-show="formData.type === 'mj'"
                        :title-prefix="{ message: '左边图标', icon: 'vxe-icon-question-circle-fill' }">
                        <template #default="{ data }">
                            <vxe-input v-model="data.full" placeholder="请输入满额度" clearable></vxe-input>
                        </template>
                    </vxe-form-item>

                    <vxe-form-item title="减" field="minus" :item-render="{}" v-show="formData.type === 'mj'"
                        :title-suffix="{ message: '右边图标', icon: 'vxe-icon-setting-fill' }">
                        <template #default="{ data }">
                            <vxe-input v-model="data.minus" type="integer" placeholder="请输入减额度" clearable></vxe-input>
                        </template>
                    </vxe-form-item>
                    <vxe-form-item title="折扣" field="discount" :item-render="{}" v-show="formData.type !== 'mj'"
                        :title-suffix="{ message: '右边图标', icon: 'vxe-icon-setting-fill' }">
                        <template #default="{ data }">
                            <vxe-input v-model="data.discount" type="float" clearable></vxe-input>
                        </template>
                    </vxe-form-item>

                    <vxe-form-item align="center">
                        <template #default>
                            <vxe-button type="submit" status="primary" content="提交"></vxe-button>
                            <vxe-button type="reset" content="重置"></vxe-button>
                        </template>
                    </vxe-form-item>
                </vxe-form>
            </div>


            <!-- 弹窗 -->
            <el-dialog v-model="dialogFormVisible" title="编辑" align-center @close="close">
                <vxe-form :data="editFormData" :rules="formRules" title-align="right" title-width="100"
                    @submit="submitEvent" title-colon custom-layout>
                    <vxe-form-item title="类型" field="type" :item-render="{}" span="24">
                        <template #default="{ data }">
                            <vxe-select v-model="data.type" placeholder="可清除" clearable>
                                <vxe-option value="mj" label="满减"></vxe-option>
                                <vxe-option value="zk" label="折扣"></vxe-option>
                            </vxe-select>
                        </template>
                    </vxe-form-item>
                    <vxe-form-item title="满" field="full" :item-render="{}" v-show="editFormData.type === 'mj'"
                        :title-prefix="{ message: '左边图标', icon: 'vxe-icon-question-circle-fill' }" span="24">
                        <template #default="{ data }">
                            <vxe-input v-model="data.full" placeholder="请输入昵称" clearable></vxe-input>
                        </template>
                    </vxe-form-item>

                    <vxe-form-item title="减" field="minus" :item-render="{}" v-show="editFormData.type === 'mj'"
                        :title-suffix="{ message: '右边图标', icon: 'vxe-icon-setting-fill' }" span="24">
                        <template #default="{ data }">
                            <vxe-input v-model="data.minus" type="integer" placeholder="请输入年龄" clearable></vxe-input>
                        </template>
                    </vxe-form-item>
                    <vxe-form-item title="折扣" field="discount" :item-render="{}" v-show="editFormData.type !== 'mj'"
                        :title-suffix="{ message: '右边图标', icon: 'vxe-icon-setting-fill' }" span="24">
                        <template #default="{ data }">
                            <vxe-input v-model="data.discount" type="float" clearable></vxe-input>
                        </template>
                    </vxe-form-item>

                    <div>
                        <vxe-form-item align="center">
                            <template #default>
                                <vxe-button type="submit" status="primary" content="提交"></vxe-button>
                                <vxe-button type="reset" content="重置"></vxe-button>
                            </template>
                        </vxe-form-item>
                    </div>
                </vxe-form>
            </el-dialog>
        </el-card>
        <el-card shadow="never">
            <vxe-grid ref='xGrid' v-bind="gridOptions" v-on="gridEvent">
                <template #discountTypeSlot="{ row }">
                    <div v-if="row.type === 'mj'">
                        满减
                    </div>
                    <div v-else>
                        折扣
                    </div>
                </template>
                <template #action="{ row }">
                    <el-button type="primary" @click="edit(row)">编辑</el-button>
                    <el-button type="danger" @click="del(row)">删除</el-button>
                </template>
            </vxe-grid>
        </el-card>
    </div>
</template>

<script setup lang="ts">
const { gridOptions } = useDiscount();
const gridEvent: VxeGridListeners<RowVO> = {
    proxyQuery() {
        console.log('数据代理查询事件')
    },
    proxyDelete() {
        console.log('数据代理删除事件')
    },
    proxySave() {
        console.log('数据代理保存事件')
    }
}



import { VXETable, VxeFormPropTypes, VxeFormEvents } from 'vxe-table'
import { http } from '@/plugins/axios'
interface FormDataVO {
    id?: number
    type: string
    title: string
    full: string
    minus: string
    discount: string
}
const formRef = ref()
const collapseStatus = ref(true)

const formData = reactive<FormDataVO>({
    id: 0,
    title: '',
    type: '',
    full: '',
    minus: "",
    discount: "",
})

const dialogFormVisible = ref(false)
const editFormData = reactive<FormDataVO>({
    id: 0,
    title: '',
    type: '',
    full: '',
    minus: "",
    discount: '1',
})
//编辑
const edit = (row: RowVO) => {
    dialogFormVisible.value = true
    editFormData.id = row.id
    editFormData.title = row.title
    editFormData.type = row.type
    editFormData.full = row.full
    editFormData.minus = row.minus
    editFormData.discount = row.discount
}
const close = () => {
    dialogFormVisible.value = false
    editFormData.id = 0
    editFormData.title = ''
    editFormData.type = ''
    editFormData.full = ''
    editFormData.minus = ''
    editFormData.discount = ''
}
// 删除
const del = async (row: RowVO) => {
    await http.request({
        url: `/discount/${row.id}`,
        method: "DELETE",
        data: editFormData
    })
}

const xGrid = ref()
const reload = () => {
    xGrid.value.commitProxy("reload")
}
const formRules = reactive<VxeFormPropTypes.Rules>({
    type: [
        { required: true, message: '请选择' }
    ],
})

const submitEvent: VxeFormEvents.Submit = async () => {
    if (editFormData.id == 0) {
        if (formData.type === 'mj') {
            // 满减
            if (!formData.full || !formData.minus) {
                VXETable.modal.message({ content: '请输入满减条件', status: 'error' })
                return
            } else {
                formData.title = `满${formData.full},减${formData.minus}`
            }
        } else if (formData.type === 'zk') {
            // 折扣
            if (!formData.discount) {
                VXETable.modal.message({ content: '请输入折扣条件', status: 'error' })

                return
            } else {
                formData.title = `打${formData.discount}折`
            }
        }
        await http.request({
            url: `/discount`,
            method: "POST",
            data: formData
        })
        //清空表单
        formRef.value.reset()
        await reload()
    } else {
        if (editFormData.type === 'mj') {
            // 满减
            if (!editFormData.full || !editFormData.minus) {
                VXETable.modal.message({ content: '请输入满减条件', status: 'error' })
                return
            } else {
                editFormData.title = `满${editFormData.full},减${editFormData.minus}`
            }
        } else if (editFormData.type === 'zk') {
            // 折扣
            if (!editFormData.discount) {
                VXETable.modal.message({ content: '请输入折扣条件', status: 'error' })
                return
            } else {
                editFormData.title = `打${editFormData.discount}折`
            }
        }
        await http.request({
            url: `/discount/${editFormData.id}`,
            method: "PUT",
            data: editFormData
        })
        formRef.value.reset()

        await reload()
    }
}

const resetEvent: VxeFormEvents.Reset = () => {
    console.log('重置事件')
}


</script>

<style scoped></style>